<template>
  <BaseModal ref="baseModalRef" @on-modal-ok="onModalOk" @on-modal-cancel="onModalCancel">
    <template #titleArea>应用超算</template>

    <template #contentArea>
      <a-alert :message="msg" type="success" />
      <a-form v-if="formData && formData.length" ref="formRef" :label-col="layoutObj.labelCol" :wrapper-col="layoutObj.wrapperCol" style="margin-top: 16px" :model="superComputer.dynamicForm">
        <a-row v-for="v in formData" :key="v.key" type="flex">
          <a-col :span="24">
            <!-- none的情况，进行隐藏，在个人空间超算不进行传递该字段， 在项目超算里面，提交的时候会 item.key 的值就是项目号-->
            <template v-if="v.display !== 'none'">
              <a-form-item
                :name="v.key"
                :label="v.label"
                :validate-first="true"
                :rules="[
                  {
                    required: v.isNecessary ? true : false,
                    message: `${errorTips[v.type]}${v.label}`,
                    trigger: 'blur',
                  },
                  {
                    required: v.isNecessary ? true : false,
                    type: 'string',
                    message: `${v.label}格式不正确，请重新输入`,
                    pattern: v.rule ? new RegExp(v.rule) : '',
                  },
                ]"
              >
                <!-- 输入框控件 -->
                <template v-if="v.type === 'input'">
                  <a-input v-model:value="superComputer.dynamicForm[v.key]" />
                </template>

                <!-- 下拉框控件 -->
                <template v-if="v.type === 'staticSelect'">
                  <a-select v-if="v.type === 'staticSelect'" v-model:value="superComputer.dynamicForm[v.key]" :placeholder="'请选择' + v.label">
                    <!-- 版本号特殊处理 -->
                    <template v-if="v.key === 'JH_VERSION'">
                      <a-select-option v-for="listItem in v.selectValue && v.selectValue.split('|')" :key="listItem" :label="listItem" :value="listItem"> </a-select-option>
                    </template>
                    <template v-else>
                      <a-select-option v-for="listItem in v.selectValue && v.selectValue.split('|')" :key="listItem" :label="listItem" :value="listItem"></a-select-option>
                    </template>
                  </a-select>
                </template>

                <!-- 文件控件 -->
                <div v-if="v.type === 'file'" class="btn-view">
                  <a-button @click.stop="onOpenFileManage(v)">远端 </a-button>
                  <a-button>
                    {{ v[v["key"]] ? 1 : 0 }}
                    个文件</a-button
                  >
                  <span style="margin-left: 10px">{{ v[v["key"]] }}</span>
                </div>

                <!-- 开关控件 -->
                <div v-if="v.type === 'switch'" class="switch-view">
                  <a-switch v-model:value="superComputer.dynamicForm[v.key]" checked-children="on" un-checked-children="off"></a-switch>
                </div>
              </a-form-item>
            </template>
          </a-col>
        </a-row>
      </a-form>
    </template>

    <template #footerArea>
      <a-button @click.stop="onResetFields">重置表单</a-button>
    </template>
  </BaseModal>

  <!-- 文件柜 -->
  <BaseModal ref="fielCabinetRef" width="80%" @on-modal-ok="onFileModalOk" @on-modal-cancel="onFileModalCancel">
    <template #titleArea>文件柜</template>
    <template #contentArea>
      <XTModuleFileCabinet></XTModuleFileCabinet>
    </template>
  </BaseModal>
</template>

<script setup lang="ts">
import BaseModal from "@/components/Basics/BaseModal.vue"
import XTModuleFileCabinet from "@/components/Business/XTModuleFileCabinet.vue"
import { computed } from "vue"
import type { FormInstance } from "ant-design-vue"
import { userStore } from "@/store/userStore"

interface ISuperItem {
  appId: string
  appType: string
  id: string
  key: string
  label: string
  rule: string
  type: string
  [propName: string]: string
}
interface Props {
  formData: ISuperItem[]
  cpuNum?: ""
}
const props = withDefaults(defineProps<Props>(), {
  cpuNum: "",
})

const msg = computed(() => {
  return `目前集中群可用于计算[fluent]作业的CPU核数为${props.cpuNum}`
})

//数据
const layoutObj = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
}
const superComputer = reactive({
  dynamicForm: {},
  formData: [],
})

//校验提示信息
const errorTips = Object.freeze({
  input: "请输入",
  staticSelect: "请选择",
  file: "请上传",
})

//DOM元素
const formRef = shallowRef<FormInstance>()
const baseModalRef = shallowRef<FormInstance>()
let curItem = {}

//打开弹框
const setOpen = () => {
  baseModalRef.value.setOpen()
}

//取消按钮，关闭弹框
const onModalCancel = () => {
  onResetFields()
  baseModalRef.value.setCloes()
}

//重置表单
const onResetFields = () => {
  formRef.value.resetFields()
}

//弹框确定，提交超算作业
const onModalOk = async () => {
  try {
    const values = await formRef.value.validateFields()
    console.log(values)
    userStore().spinning = true
    alert("提交超算作业")
    setTimeout(() => {
      userStore().spinning = false
    }, 1000 * 3)
  } catch (errorInfo) {
    console.log("Failed:", errorInfo)
  }
}

//  ============= >> 文件柜相关操作 ===========
const fielCabinetRef = shallowRef()

const onFileModalOk = () => {
  fielCabinetRef.value.setCloes()
}

const onFileModalCancel = () => {
  fielCabinetRef.value.setCloes()
}

// 打开文件柜进行选择文件
const onOpenFileManage = (v: ISuperItem): void => {
  // console.log(v)
  curItem = v
  alert("打开景行文件柜")

  fielCabinetRef.value.setOpen()
}

//初始化方法
const initJH = (): void => {
  window.chooseSelectFile = (filepath: string) => {
    console.log("chooseSelectFile 选择的文件 ...", filepath)
    const key = curItem["key"]
    curItem[key] = filepath

    //更新dynamicValidateForm 对象对应 动态key，进行相应赋值
    for (let formKey in superComputer.dynamicForm) if (formKey === key) superComputer.dynamicForm[formKey] = filepath
  }

  //关闭
  window.cancelSelect = () => {
    fielCabinetRef.value.setCloes()
  }
}

onMounted(() => {
  initJH()
})

defineExpose({
  setOpen,
})
</script>

<!-- 

   问题：该样式文件没有加scoped， 因为加了无法修改样式，解决方案如下：
    1. 通过getContainer 可以修改，但是样式有问题 {https://blog.csdn.net/weixin_45958605/article/details/124094147}
    2. 直接去掉scoped, 模态框统一调用该组件
 -->
<style lang="less">
.btn-view {
  .ant-btn {
    margin-right: 10px;
  }
}
.ant-alert-message {
  color: #67c23a;
}

.ant-modal-wrap::-webkit-scrollbar {
  width: @webkit-scrollbar-width;
  height: @webkit-scrollbar-height;
}
.ant-modal-wrap::-webkit-scrollbar-thumb {
  background-color: @webkit-scrollbar-thumb-modal;
}
</style>
